

{% block title %}{% endblock %}
{% load static %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'news/css/shouye.css' %}" >
{% endblock %}

{% block content %}
     <div class="s1" style="background-image:url(/static/news/images/home/beijing.jpg)">
         <div id="d1">
             <a href="{% url 'news:publish_content' %}" style=" font_size: 5px; width:5px; height:5px; color:white">发布内容</a>
             <a href="{% url 'news:user_index' %}"><img src="{% static 'news/images/1234.jpg' %}" style="width:25px; height:25px; border-radius: 50%; position:relative; right:-80px; top:-20px;"></a>
         </div>

         <a href=""><img src="{{ user.get_url }}{% static '/news/images/home/u191.png' %}" id="erweima"></a>
    </div>
    <div id="out">
    <div id="in">
        <img src="{% static '/news/images/home/u96.png' %}" alt="">
        <img src="{% static '/news/images/home/u96.png' %}" alt="">
        <img src="{% static '/news/images/home/u96.png' %}" alt="">
        <img src="{% static '/news/images/home/u96.png' %}" alt="">
    </div>
</div>
<div id="s1">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="jiantou">
    <div id="left"><</div>
    <div id="right">></div>
</div>
     <img id="m1" src="{% static '/news/images/home/u98.png' %}" alt="">
     <img id="m2" src="{% static '/news/images/home/u98.png' %}" alt="">
     <div id="m3">
       <span id="h1">新闻</span><span id="h2">政策</span><span id="h3">行情</span><span id="h4">技术</span>
     </div>
     <ul>
         <li>
             <div>
                 <img src="{% static '/news/images/home/u117.png' %}" alt="">
                 <p>2018年，AI会在金融行业哪些方向上发力？</p>
                 <div class="f1">
                    <p>对于很多人来说，提起人工智能这个词，更多会联想到HBO热播的电视剧《西部世界》里那子的这个样子的这个样啊啊啊…</p>
                 </div>
             </div>
             <div>
                 <img src="{% static '/news/images/home/u121.png' %}" alt="">
                 <p>2018年，AI会在金融行业哪些方向上发力？</p>
                 <div class="f1">
                    <p>对于很多人来说，提起人工智能这个词，更多会联想到HBO热播的电视剧《西部世界》里那子的这个样子的这个样啊啊啊…</p>
                 </div>
             </div>
              <div>
                  <img src="{% static '/news/images/home/u123.png' %}" alt="">
                 <p>2018年，AI会在金融行业哪些方向上发力？</p>
                 <div class="f1">
                    <p>对于很多人来说，提起人工智能这个词，更多会联想到HBO热播的电视剧《西部世界》里那子的这个样子的这个样啊啊啊…</p>
                 </div>
              </div>
             <div>
                 <img src="{% static '/news/images/home/u125.png' %}" alt="">
                 <p>2018年，AI会在金融行业哪些方向上发力？</p>
                 <div class="f1">
                    <p>对于很多人来说，提起人工智能这个词，更多会联想到HBO热播的电视剧《西部世界》里那子的这个样子的这个样啊啊啊…</p>
                 </div>
             </div>
              <div>
                  <img src="{% static '/news/images/home/u127.png' %}" alt="">
                 <p>2018年，AI会在金融行业哪些方向上发力？</p>
                 <div class="f1">
                    <p>对于很多人来说，提起人工智能这个词，更多会联想到HBO热播的电视剧《西部世界》里那子的这个样子的这个样啊啊啊…</p>
                 </div>
              </div>
             <div>
                 <img src="{% static '/news/images/home/u129.png' %}" alt="">
                 <p>2018年，AI会在金融行业哪些方向上发力？</p>
                 <div class="f1">
                    <p>对于很多人来说，提起人工智能这个词，更多会联想到HBO热播的电视剧《西部世界》里那子的这个样子的这个样啊啊啊…</p>
                 </div>
             </div>
         </li>
     </ul>

     <div id="f2">
         <p>快讯</p>
         <ul id="u1">
             <li>
                 <div class="s1" id="k1"></div>
                 <p id="p1">蓝色光标发布小蓝机器人家族产品，机器人会
                    营销还能撰稿
                 </p>
                 <div id="k2">
                     <p>8月4日，蓝色光标对外发布智能营销产品矩阵“小蓝机器人家族”，这是营销行业内首款智能自动化人机交互产品族。其中，idataBot营销数据平台、撰稿机器人妙笔、发布机器人生花、鲁班一站式电商营销平台、麦集客等产品均为首次亮相。</p>
                 </div>
                 <p id="p2">38分钟前</p>
                 <span class="i1">
                    <img src="{% static '/news/images/home/k_03.png' %}">分享
                 </span>
                 <span class="i2">
                     <img src="{% static '/news/images/home/yan.png' %}" class="i3">300
                 </span>

             </li>
              <li id="l1">
                   <div class="s1" id="k3"></div>
                 <p>万亿美元市值后，华尔街普遍认为苹果股价将
                    继续走高
                 </p>
                  <br><p class="p2">38分钟前</p>
                 <span class="i1">
                    <img src="{% static '/news/images/home/k_03.png' %}">分享
                 </span>
                 <span class="i2">
                     <img src="{% static '/news/images/home/yan.png' %}" class="i3">300
                 </span>

             </li>
              <li>
                   <div class="s1" id="k5"></div>
                 <p>万亿美元市值后，华尔街普遍认为苹果股价将
                    继续走高
                 </p>
                  <br><p class="p2">38分钟前</p>
                 <span class="i1">
                    <img src="{% static '/news/images/home/k_03.png' %}">分享
                 </span>
                 <span class="i2">
                     <img src="{% static '/news/images/home/yan.png' %}" class="i3">300
                 </span>
             </li>
              <li>
                   <div class="s1" id="k6"></div>
                 <p>万亿美元市值后，华尔街普遍认为苹果股价将
                    继续走高
                 </p>
                  <br><p class="p2">38分钟前</p>
                 <span class="i1">
                    <img src="{% static '/news/images/home/k_03.png' %}">分享
                 </span>
                 <span class="i2">
                     <img src="{% static '/news/images/home/yan.png' %}" class="i3">300
                 </span>
             </li>
              <li>
                   <div class="s1" id="k7"></div>
                 <p>万亿美元市值后，华尔街普遍认为苹果股价将
                    继续走高
                 </p>
                  <br><p class="p2">38分钟前</p>
                 <span class="i1">
                    <img src="{% static '/news/images/home/k_03.png' %}">分享
                 </span>
                 <span class="i2">
                     <img src="{% static '/news/images/home/yan.png' %}" class="i3">300
                 </span>

             </li>
         </ul>
     </div>
     <div id="f3"></div>
     <div id="f4">
         <p>热门新闻</p>
         <img src="{% static '/news/images/home/u230.png' %}" alt="">
         <ul>
             <li>
                 <img src="{% static '/news/images/home/u234.png' %}" alt="">
                 <p>不止用饿了么送外卖，星巴克
                        还将700晚会很大了啥啊的…
                 </p>
                 <span>2018-11-26</span>
             </li>
              <li>
                 <img src="{% static '/news/images/home/u234.png' %}" alt="">
                 <p>不止用饿了么送外卖，星巴克
                        还将700晚会很大了啥啊的…
                 </p>
                 <span>2018-11-26</span>
             </li>
              <li>
                 <img src="{% static '/news/images/home/u234.png' %}" alt="">
                 <p>不止用饿了么送外卖，星巴克
                        还将700晚会很大了啥啊的…
                 </p>
                 <span>2018-11-26</span>
             </li>
              <li>
                 <img src="{% static '/news/images/home/u234.png' %}" alt="">
                 <p>不止用饿了么送外卖，星巴克
                        还将700晚会很大了啥啊的…
                 </p>
                 <span>2018-11-26</span>
             </li>
         </ul>
     </div>
{% endblock %}
{% block js %}
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>


    $('#s1 span').mouseover(function(){
        index = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('#in img').eq(index).show().siblings().hide();
        clearInterval(bb);
        b=index;
    }).mouseout(function () {
        aa();
    });



    aa();

    var b = 0;

    function aa() {
        bb = setInterval(rClick,1000);
    }



    $('.jiantou').mouseover(function () {
        clearInterval(bb);
    }).mouseout(function () {
        aa();
    });



    $('#right').click(rClick);

    function rClick() {
        b++;
        if(b<4){
            $('#s1 span').eq(b).addClass('active').siblings().removeClass('active');
            $('#in img').eq(b).show().siblings().hide();
        }else{
            b=0;
            $('#s1 span').eq(0).addClass('active').siblings().removeClass('active');
            $('#in img').eq(0).show().siblings().hide();
        }
    }

    $('#left').click(lClick);
    function lClick() {
        b--;
        if(b>0){
            $('#s1 span').eq(b).addClass('active').siblings().removeClass('active');
            $('#in img').eq(b).show().siblings().hide();
        }else{
             b=4
            $('#s1 span').eq(0).addClass('active').siblings().removeClass('active');
            $('#in img').eq(0).show().siblings().hide();
        }


    }

      $('.p2').click(function(){
        $('#erweima').toggle()
    })



</script>
{% endblock %}
